<template>
    <a-card title="车辆通行统计">
        <a-range-picker @change="change"
            :default-value="[moment(currentDate, dateFormat), moment(currentDate, dateFormat)]" />
        <!-- <a-input placeholder="请输入货物名称" v-model="goods" style="width: 200px;"></a-input> -->
        <a-select placeholder="请选择是否包装油业务" :value="carType" style="width: 200px;"
            @change="carTypeChange">
            <a-select-option :value="undefined">请选择</a-select-option>
            <a-select-option key="1" value="1">是</a-select-option>
            <a-select-option key="0" value="0">否</a-select-option>
        </a-select>
        <a-button type="primary" @click="getData(start, end)" icon="search">查询</a-button>
        <div v-if="showCharts" id="main" style="height: 300px"></div>

        <a-timeline mode="alternate" style="margin-top:30px">
            <a-timeline-item>
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询开始时间 :
                {{ this.start }}</a-timeline-item>
            <a-timeline-item>
                其中包含: <a-divider type="vertical" />
                <span v-for="item in data" :key="item">
                    {{ item.name }}:{{ item.value }}
                    <a-divider type="vertical" />
                </span>
            </a-timeline-item>
            <a-timeline-item>
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询结束时间 :
                {{ this.end }}</a-timeline-item>
        </a-timeline>
        <!-- <a-row :gutter="24">
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-table ref="table" size="middle" :scroll="{ x: true }" bordered
                    rowKey="{record => record.goods}" :columns="columns" :dataSource="takeGoodsData"
                    :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
                    @change="handleTableChange">
                    <template slot="title">
                        提货
                    </template>
                </a-table>
            </a-col>
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-table ref="table" size="middle" :scroll="{ x: true }" bordered
                    rowKey="{record => record.goods}" :columns="columns"
                    :dataSource="deliveryGoodsData" :pagination="ipagination" :loading="loading"
                    class="j-table-force-nowrap" @change="handleTableChange">
                    <template slot="title">
                        送货
                    </template>
                </a-table>
            </a-col>
        </a-row> -->
    </a-card>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'
// import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
    name: 'CarinfoCount',
    // mixins: [JeecgListMixin, mixinDevice],
    components: {},
    data() {
        this.dateFormat = 'YYYY-MM-DD'
        this.currentDate = moment().format('YYYY-MM-DD')
        return {
            disableMixinCreated: false,
            showCharts: false,
            data: [],
            total: [],
            start: '',
            end: '',
            goods: '',
            carType: undefined,
            takeGoodsData: [],
            deliveryGoodsData: [],
            columns: [
                {
                    title: '货物',
                    dataIndex: 'goods',
                    key: 'goods',
                    width: 100,
                    align: 'center',
                },
                {
                    title: '入场（辆）',
                    align: 'center',
                    dataIndex: 'total',
                    width: 100,
                },
                {
                    title: '国五',
                    children: [
                        {
                            title: '辆次',
                            dataIndex: 'guowu',
                            width: 100,
                        },
                        {
                            title: '比例',
                            dataIndex: 'guowuPercent',
                            width: 100,
                            customRender: function (t, r, index) {
                                return t + "%"
                            },
                        },
                    ],
                },
                {
                    title: '国六',
                    children: [
                        {
                            title: '辆次',
                            dataIndex: 'guoliu',
                            width: 100,
                        },
                        {
                            title: '比例',
                            dataIndex: 'guoliuPercent',
                            width: 100,
                            customRender: function (t, r, index) {
                                return t + "%"
                            },
                        },
                    ],
                },
                {
                    title: '新能源',
                    children: [
                        {
                            title: '辆次',
                            dataIndex: 'xinnengyuan',
                            width: 100,
                        },
                        {
                            title: '比例',
                            dataIndex: 'xinnengyuanPercent',
                            width: 100,
                            customRender: function (t, r, index) {
                                return t + "%"
                            },
                        },
                    ],
                },
            ]
        }
    },
    mounted() {
        this.start = this.currentDate + ' 00:00:00'
        this.end = this.currentDate + ' 23:59:59'
        this.getData(this.start, this.end)
    },
    computed: {},
    methods: {
        moment,
        getData(start, end) {
            this.getRecordCout(start, end)
            // this.getGoodsList(start, end)
        },
        change(date, dateStr) {
            this.start = dateStr[0] + ' 00:00:00'
            this.end = dateStr[1] + ' 23:59:59'
            this.getData(this.start, this.end)
        },
        getRecordCout(start, end) {
            this.showCharts = false
            getAction('/carLedger/carLedger/getCountList', { start: start, end: end, goods: this.goods, carType: this.carType }).then((res) => {
                if (res.success) {
                    this.showCharts = true
                    this.$nextTick(() => {
                        this.data = res.result.data
                        this.parseChartData(this.data)
                        this.total = res.result.count
                        this.getCharts()
                    })
                }
            })
        },
        getGoodsList(start, end) {
            getAction('/carLedger/carLedger/goodsList', { start: start, end: end, carType: this.carType }).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.takeGoodsData = this.parseGoodsData(res.result.take)
                        this.deliveryGoodsData = this.parseGoodsData(res.result.delivery)
                    })
                }
            })
        },
        // 使用柱形图，关于其他配置可以去官网查看
        getCharts() {
            const chartBox = this.$echarts.init(document.getElementById('main'))
            const option = {
                title: { subtext: '总数:' + this.total },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: true },
                        saveAsImage: { show: true },
                    },
                },
                series: [
                    {
                        name: '来车量',
                        type: 'pie',
                        center: ['50%', '50%'],

                        itemStyle: {
                            borderRadius: 8,
                        },
                        data: this.data,
                        label: {
                            show: true,

                            formatter: '{b}:{c}' + '\r' + '({d}%)',
                        },
                    },
                ],
            }
            chartBox.setOption(option)
            // 根据页面大小自动响应图表大小
            window.addEventListener('resize', function () {
                chartBox.resize()
            })
        },
        parseChartData(data) {
            data.forEach(e => {
                switch (e.name) {
                    case "4":
                        e.name = "国四"
                        break
                    case "5":
                        e.name = "国五"
                        break
                    case "6":
                        e.name = "国六"
                        break
                    case "D":
                        e.name = "新能源"
                        break
                }
            });
        },
        parseGoodsData(data) {
            data.forEach(item => {
                item.guoliuPercent = (item.guoliu / item.total * 100).toFixed(2);
                item.guowuPercent = (item.guowu / item.total * 100).toFixed(2);
                item.xinnengyuanPercent = (item.xinnengyuan / item.total * 100).toFixed(2);
            })
            return data
        },
        carTypeChange(value) {
            this.carType = value
        }
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>